﻿@(Html.DevExtreme().Chart()
    .ID("chart")
    .DataSource(new[] {
        new { month = "January", avgT = 14.1, avgLowT = 9.1, avgHighT = 19.1, avgH = 70 },
        new { month = "February", avgT = 14.7, avgLowT = 9.8, avgHighT = 19.6, avgH = 74 },
        new { month = "March", avgT = 15.6, avgLowT = 10.6, avgHighT = 20.4, avgH = 79 },
        new { month = "April", avgT = 16.8, avgLowT = 11.9, avgHighT = 21.7, avgH = 80 },
        new { month = "May", avgT = 18.2, avgLowT = 13.6, avgHighT = 22.7, avgH = 83 },
        new { month = "June", avgT = 20.2, avgLowT = 15.4, avgHighT = 25.0, avgH = 85 },
        new { month = "July", avgT = 22.6, avgLowT = 17.3, avgHighT = 27.9, avgH = 86 },
        new { month = "August", avgT = 23.0, avgLowT = 17.7, avgHighT = 28.4, avgH = 86 },
        new { month = "September", avgT = 22.3, avgLowT = 17.0, avgHighT = 27.7, avgH = 83 },
        new { month = "October", avgT = 20.1, avgLowT = 14.8, avgHighT = 25.3, avgH = 79 },
        new { month = "November", avgT = 17.2, avgLowT = 11.8, avgHighT = 22.7, avgH = 72 },
        new { month = "December", avgT = 14.6, avgLowT = 9.5, avgHighT = 19.7, avgH = 68 }
    })
    .CommonSeriesSettings(s => s.ArgumentField("month"))
    .Panes(p => {
        p.Add().Name("top");
        p.Add().Name("bottom");
    })
    .DefaultPane("bottom")
    .Series(s => {
        s.Add()
            .Pane("top")
            .ValueField("avgT")
            .Name("Average Temperature, °C")
            .ValueErrorBar(b => b
                .LowValueField("avgLowT")
                .HighValueField("avgHighT")
                .LineWidth(1)
                .Opacity(0.8));

        s.Add()
            .Pane("bottom")
            .ValueField("avgH")
            .Type(SeriesType.Bar)
            .Name("Average Humidity, %")
            .ValueErrorBar(b => b
                .Type(ValueErrorBarType.Fixed)
                .Value(3)
                .LineWidth(1));
    })
    .ArgumentAxis(a => a
        .Label(l => l
            .DisplayMode(ChartLabelDisplayMode.Stagger)))
    .Export(e => e.Enabled(true))
    .ValueAxis(a => {
        a.Add()
            .Pane("top")
            .Grid(g => g.Visible(true))
            .Title(t => t.Text("Temperature, °C"));

        a.Add()
            .TickInterval(50)
            .Pane("bottom")
            .Grid(g => g.Visible(true))
            .Title(t => t.Text("Humidity, %"));
    })
    .Tooltip(t => t
        .Enabled(true)
        .CustomizeTooltip(@<text>
            function (arg) {
                return {
                    text: arg.seriesName + ": " + arg.value + " ( range: " + arg.lowErrorValue  + " - "  + arg.highErrorValue + ")"
                };
            }
        </text>))
    .Legend(l => l
        .VerticalAlignment(VerticalEdge.Bottom)
        .HorizontalAlignment(HorizontalAlignment.Center))
    .Title(t => t.Text("Weather in Los Angeles, California"))
)
